<toaster-container></toaster-container>
<div class="row mb-2">
    <a href="javascript:;" class="text-link" [routerLink]="['../../']">
        <i class="ti-arrow-left"></i> Back to Insights
    </a>
</div>
<div class="row mt-2">
    <div *ngIf="insight" class="col-md-5">
        <h3>
            <span *ngIf="edit == 'false'">Add</span>
            <span *ngIf="edit == 'true' && canEdit">Edit</span>
            <span *ngIf="edit == 'true' && !canEdit">Details Of</span> 
            Insight
        </h3>
        <dl>
            <dt>Sector</dt>
            <dd>
                <select *ngIf="sectors" [(ngModel)]="insight.insightSectorId" class="form-control mb-2" [disabled]="!canEdit">
                    <option [ngValue]="null">Choose Sector</option>
                    <option *ngFor="let sector of sectors | enumToArray" [ngValue]="sector.id">{{sector.name}}</option>
                </select>
            </dd>
            <dt>Topic</dt>
            <dd>
                <select *ngIf="topics" [(ngModel)]="insight.insightTopicId" class="form-control mb-2" [disabled]="!canEdit">
                    <option [ngValue]="null">Choose Topic</option>
                    <option *ngFor="let topic of topics | enumToArray" [ngValue]="topic.id">{{topic.name}}</option>
                </select>
            </dd>
            <dt>Title of Publication*</dt>
            <dd>
                <input *ngIf="canEdit" [(ngModel)]="insight.title" class="form-control">
                <span *ngIf="!canEdit">{{insight.title}}</span>
            </dd>
            <dt>Publish Date*</dt>
            <dd>
                <div *ngIf="canEdit" class="form-group">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="insight.datePublished">
                </div>
                <span *ngIf="!canEdit">{{insight.datePublished | date: 'dd-MM-yyy'}}</span>
            </dd>
            <dt>Image*</dt>
            <dd>
                <input *ngIf="canEdit" type="file" ng2FileSelect [uploader]="imageUploader" [disabled]="!canEdit" style="width:80%" accept=".png, .jpg, .jpeg"/>
                <img *ngIf="insight.imageUrl" width="50" height="51" [src]="insight.imageUrl">
            </dd>
            <dt>Publication File*</dt>
            <dd>
                <input *ngIf="canEdit" type="file" ng2FileSelect [uploader]="fileUploader" [disabled]="!canEdit" style="width:80%" accept=".pdf"/>
                <span *ngIf="!canEdit || (insight.fileName && !fileSuccess)">{{insight.fileName}}</span>
            </dd>
            <dt>Unpublished Date*</dt>
            <dd>
                <div *ngIf="canEdit" class="form-group">
                    <input class="form-control" bsDatepicker [bsConfig]="{ containerClass: 'theme-default' }" [(ngModel)]="insight.dateUnPublished">
                </div>
                <span *ngIf="!canEdit">{{insight.dateUnPublished | date: 'dd-MM-yyy'}}</span>
            </dd>
        </dl>
        <div *ngIf="canEdit" class="row mt-2">
            <button class="btn btn-primary-dark" (click)="publishInsight()">
                Publish
            </button>
            <button class="btn btn-primary-dark ml-1" (click)="saveInsight()">
                Save as Draft
            </button>
        </div>
    </div>
    <div class="col-md-7">
        <h5>Body of Insight</h5>
        <quill-editor *ngIf="insight" [modules]="quillOptions" [(ngModel)]="insight.summary" [readOnly]="!canEdit"></quill-editor>
    </div>
</div>